import { FC, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Popup, PopupPosition } from "react-vant";
import LozyLoadImage from "@/components/LozyLoadImage/index";

interface IProps {
  commentList: CommentItem[];
}
const Comment: FC<IProps> = (props) => {
  const { commentList } = props;
  const [state, setState] = useState<PopupPosition>("");
  const [state2, setState2] = useState<PopupPosition>("");
  const handleReply = (id: number) => {
    console.log(id, "回复");
    window.history.pushState(null, "", document.URL);
    window.onpopstate = function () {
      window.history.pushState(null, "", document.URL);
    };
    setState2("bottom");
  };
  const openReply = (id: number) => {
    console.log(id, "查看回复");
    window.history.pushState(null, "", document.URL);
    window.onpopstate = function () {
      window.history.pushState(null, "", document.URL);
    };
    setState("bottom");
  };
  const onClose = () => {
    window.onpopstate = null;
    setState("");
  };
  const onClose2 = () => {
    window.onpopstate = null;
    setState2("");
  };
  useEffect(() => {
    window.addEventListener("popstate", () => {
      console.log(1);
      onClose();
      onClose2();
    });
    return () => {};
  }, []);
  return (
    <div className={styles.CommentWrap}>
      {commentList.length
        ? commentList.map((it, index) => {
            return (
              <div className={styles.commentItemWrap} key={index}>
                <div className={styles.userImg}>
                  <LozyLoadImage src={it.userImg} alt={"测试"} />
                </div>
                <div
                  className={styles.contentWrap}
                  onClick={() => handleReply(it.commentId)}
                >
                  <div className={styles.userName}>{it.userName}</div>
                  <div className={styles.date}>{it.date}</div>
                  <div className={styles.content}>{it.content}</div>
                  {it.repliesNum ? (
                    <div
                      className={styles.repliesNum}
                      onClick={(e) => {
                        e.stopPropagation();
                        e.nativeEvent.stopImmediatePropagation();
                        openReply(it.commentId);
                      }}
                    >
                      <div>{it.repliesNum}条回复</div>
                      <div className={styles.repliesNumIcon}>
                        <svg
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                        >
                          <path d="M368.576 116.672a16 16 0 0 0-22.656 0l-45.248 45.248a16 16 0 0 0 0 22.656l327.936 327.936-327.936 327.936a16 16 0 0 0 0 22.592l45.248 45.248a16 16 0 0 0 22.656 0l384.512-384.448a16 16 0 0 0 0-22.656L368.576 116.672z"></path>
                        </svg>
                      </div>
                    </div>
                  ) : (
                    ""
                  )}
                </div>
                <div className={styles.likeNumWrap}>
                  <div>{it.likeNum}</div>
                  <div className={styles.likeNumIcon}>
                    <svg
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                    >
                      <path d="M841.900615 408.186609 664.015206 408.186609c-4.087085 0-7.605212-1.823532-9.635451-4.979408-2.044566-3.188622-2.387373-6.788613-0.932232-10.313903 10.105149-19.105127 57.494459-115.41052 44.899606-217.797421-3.51915-28.749788-18.948561-67.455321-72.482825-88.576361-13.886265-5.465478-39.682791-8.026814-59.192124-8.601912-46.860261-1.38044-56.329936 7.693216-60.373019 11.568477-0.164752 0.155543-0.324388 0.316202-0.484024 0.476861C490.730581 105.371886 491.958548 127.455857 493.514997 155.415652c0.795109 14.287401 1.694595 30.466895 0.857531 48.953945-4.579295 49.570999-11.171434 76.334549-24.283056 98.636484-40.689724 69.270666-109.423155 104.141872-122.656551 105.213273l-96.509031 0L86.587054 408.219355c-11.761881 0-21.296025 9.534144-21.296025 21.296025L65.291029 844.261383c0 11.760858 9.534144 21.296025 21.296025 21.296025l164.337859 0c0.858554 0 1.700735-0.065492 2.533706-0.164752l104.601336 0c1.191128 0.969071 2.534729 2.081405 3.739161 3.082198 22.952758 19.025309 83.921341 69.563332 184.571692 69.563332l209.634508 0c53.634548 0 96.863095-29.224602 112.819508-76.270081 0.13917-0.409322 0.26606-0.823761 0.38067-1.24127 2.246157-8.247848 8.025791-25.420973 15.344476-47.162136 27.735691-82.408895 74.159-220.339314 74.159-294.15653C958.708971 446.576965 918.317029 408.186609 841.900615 408.186609zM107.883079 450.812429l121.744785 0 0 372.152928L107.883079 822.965357 107.883079 450.812429zM844.182588 799.778262c-7.649214 22.723537-13.225209 39.289841-15.882736 48.862871-10.205433 29.319769-37.183877 46.803979-72.293513 46.803979l-209.634508 0c-85.292572 0-135.816269-41.879829-157.38961-59.763129-9.691733-8.03193-15.541975-12.881378-24.845874-12.881378l-91.914386 0L272.221962 450.812429l75.364455 0c20.070104 0 51.52142-17.555841 74.262354-33.985022 24.394596-17.623379 58.936297-47.932686 84.96409-92.242867 19.039635-32.386618 25.602098-68.703755 30.019711-116.802216 0.029676-0.317225 0.051165-0.63445 0.066515-0.952698 0.975211-20.862143-0.039909-39.114856-0.855484-53.780881-0.63445-11.403724-1.402953-25.209148-0.179079-31.395034 15.941064-3.081175 61.369719-0.632403 74.387197 4.490268 27.712155 10.934027 42.701544 28.639271 45.822628 54.138014 11.341303 92.193749-35.07689 182.903703-40.407292 192.944384-0.493234 0.932232-0.74906 1.486864-0.74906 1.486864-7.703449 16.70138-6.353708 35.947723 3.624551 51.509141 9.889231 15.376199 26.888394 24.556279 45.473681 24.556279l177.88541 0c52.712549 0 74.215282 19.825534 74.215282 68.429509C916.115897 586.05053 869.322152 725.084073 844.182588 799.778262z"></path>
                    </svg>
                  </div>
                </div>
              </div>
            );
          })
        : ""}
      <Popup
        visible={state === "bottom"}
        style={{ width: "100%", height: "90%" }}
        position="bottom"
        onClose={onClose}
        closeOnClickOverlay={false}
      >
        <div>1234</div>
      </Popup>
      <Popup
        visible={state2 === "bottom"}
        style={{ width: "100%", height: "20%" }}
        position="bottom"
        onClose={onClose2}
        closeOnClickOverlay={false}
      >
        <div className={styles.reply}>123</div>
      </Popup>
    </div>
  );
};

export default Comment;
